<template>
  <div class="app-container documentation-container">
    <searchAbility @searchClick="handleSearchClick" />
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.user.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{ scope.row.user.gender === 0 ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column label="审核状态">
        <template slot-scope="scope">
          {{
            scope.row.state === "wait"
              ? "待审核"
              : scope.row.state === "success"
              ? "审核成功"
              : "审核失败"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="user.phone" label="联系方式" />
      <el-table-column prop="user.email" label="邮箱" />
      <el-table-column label="申请时间">
        <template slot-scope="scope">
          {{ setData(scope.row.submit_time) }}
        </template>
      </el-table-column>
      <el-table-column label="变更数据">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in JSON.parse(scope.row.chinese)"
            :key="index"
            >{{ item }}</span
          >
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            :disabled="scope.row.state !== 'wait'"
            @click="handlerShow(scope.row)"
          >
            <i class="el-icon-view"></i> 审批
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="meta.total"
      :limit="meta.per_page"
      @pagination="pagination"
    />
    <EditRequest :ruleForm="formData" ref="editrequest" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import searchAbility from "./searchAbility.vue";
import EditRequest from "./components/EditRequest/index.vue";
import { modifyList } from "@/api/personnel";
export default {
  name: "Documentation",
  components: { Pagination, searchAbility, EditRequest },
  data() {
    return {
      form: {},
      meta: {},
      tableData: [],
      pageData: {
        paginate: 10,
        page: 1,
      },
      searchInfo: {
        gender: "",
        state: "",
        submit_time: "",
        name: "",
      },
      loading: false,
      activeName: "wait",
      formData: {
        id: "",
        agree: "",
        fail_reason: "",
      },
    };
  },
  created() {
    this.handleSearchClick({ ...this.pageData, ...this.searchInfo });
  },
  methods: {
    async handleSearchClick(data) {
      this.loading = true;
      this.pageData.page = 1;
      this.searchInfo = data;
      const params = {
        ...data,
        ...this.pageData,
      };
      const res = await modifyList(params);
      this.tableData = res.data.data;
      this.meta = res.data;
      this.loading = false;
    },
    pagination(page) {
      this.pageData.page = page.page;
      this.pageData.paginate = page.limit;
      this.replenishEntrys();
    },
    // 处理时间格式
    setData(data) {
      return data.match(/^\d{4}-\d{2}-\d{2}/)[0];
    },
    // 处理数组数据
    setArr(data) {
      if (Array.isArray(data)) {
        let str = "";
        data.map((item, index) => {
          if (index !== data.length - 1) {
            str += item + "、";
          } else {
            str += item;
          }
        });
        return str;
      }
      return "";
    },
    handlerShow(row) {
      this.formData.id = row.id;
      this.$refs.editrequest.title = this.setArr(JSON.parse(row.chinese));
      this.$refs.editrequest.visible = true;
      console.log(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.documentation-container {
  .document-btn {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    padding: 0 30px;
    margin: 20px 0;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
</style>
